<template>
  <n-card :bordered="false" class="proCard">

    <BasicForm @register="register" @submit="handleSubmit">
      <template #gameSelect="{ model, field }">
        <n-select v-model:value="model[field]" :options="gameOptions" clearable/>
      </template>
      <template #makeDate="{ model, field }">
        <n-date-picker
          v-model:value="model[field]"
          type="daterange"
          :is-date-disabled="dateDisableVaildate"
        />
      </template>
    </BasicForm>
    <n-tabs type="line" animated>
      <n-tab-pane name="数据" tab="数据">
        <BasicTable :columns="columns" :loading="tableLoading" :dataSource="dataSource" :row-key="(row) => row.roleId"
                    ref="actionRef"
                    @update:checked-row-keys="onCheckedRow" :pagination="false">
        </BasicTable>
      </n-tab-pane>
      <n-tab-pane name="图表" tab="图表">
        <BillChart :dataSource="dataSource"/>
      </n-tab-pane>
    </n-tabs>
  </n-card>
</template>

<script lang="ts" setup>
  import {reactive, ref, unref, onMounted,} from 'vue';
  import {c, useMessage} from 'naive-ui';
  import {BasicTable} from '@/components/Table';
  import {columns, fromSchema} from './columns';
  import {useRouter} from 'vue-router';
  import {BasicForm, useForm} from '@/components/Form/index';
  import {getLiveBroadList, getLiveDetail, LiveDetailParams} from "@/api/liveBroadcast/anchorBill";
  import {formatToDate} from "@/utils/dateUtil";
  import {useUserStore} from "@/store/modules/user";
  import {GameBill, getGameBill} from "@/api/liveBroadcast/gameBill";
  import {getGameAll} from "@/api/game/game";
  import BillChart from "../billChart.vue"

  const message = useMessage();
  const actionRef = ref();
  const gameOptions = ref([]);
  const dataSource = ref([]);
  const tableLoading = ref(false);

  const fromParams = reactive<GameBill>({
    endTime: "",
    gameKey: "",
    gameName: "",
    startTime: ""
  });


  const [register, {setFieldsValue}] = useForm({
    gridProps: {cols: '1 s:1 m:2 l:3 xl:4 2xl:4'},
    labelWidth: 120,
    schemas: fromSchema
  });


  function onCheckedRow(rowKeys: any[]) {
  }

  function reloadTable() {
    loadDataSource();
    actionRef.value.reload();
  }

  function dateDisableVaildate(current: number, phase: 'start' | 'end', value: [number, number] | null) {
    if (value != null) {
      const vArry = value as number[];
      let [startTime, endTime] = vArry;
      return endTime > new Date().getTime() || startTime > new Date().getTime()
    }

  }

  async function handleSubmit(values: Recordable) {
    console.log(values);
    Object.assign(unref(fromParams), values);
    if (values.makeDate) {
      let [startTime, endTime]: [number, number] = values.makeDate;
      let startTimeS = formatToDate(new Date(startTime));
      let endTimeS = formatToDate(new Date(endTime));
      Object.assign(unref(fromParams), {startTime: startTimeS, endTime: endTimeS})
    }
    reloadTable()
  }


  onMounted(async () => {
    let games = await getGameAll();
    console.log('games',games)
    gameOptions.value = games.map(game => {
      return {
        label: game.gameName,
        value: game.gameId
      }
    });
    let firstData = unref(gameOptions)[0];
    setFieldsValue({gameKey: firstData.value});
    unref(fromParams).gameKey = firstData.value;
    loadDataSource()
  });

  async function loadDataSource() {
    tableLoading.value = true;
    try {
      const result = await getGameBill(fromParams);
      console.log('result',result)
      dataSource.value = result.map((data => {
        return {
          gameKey: data.gameKey,
          gameName: data.gameName,
          ...data.chart
        }
      }));
      console.log('dataSource',dataSource.value)
    } finally {
      tableLoading.value = false;
    }
  }
</script>

<style lang="less" scoped>
</style>
